<script lang="ts" setup>
import { computed, watch } from 'vue'
import { getDateLocaleString } from '@/utils/common/getDateLocaleString'

import type { IListItem } from '@/stores/interfaces/list.interface'

const props = defineProps<{ listItem: IListItem }>()
const listItem = computed<IListItem>(() => props.listItem)
watch(props.listItem, () => emit('update:list-item', listItem.value))
const emit = defineEmits<{
  (event: 'update:list-item', listItem: IListItem): void
}>()
/**
 * @desc 设置/更新DDL
 * @param _value
 * @param date
 */
const setDDL = (_value: unknown, date: Date) => {
  listItem.value.endTime = date.getTime()
  emit('update:list-item', listItem.value)
}
</script>

<template>
  <div class="editor h-full flex flex-col overflow-auto p-2">
    <p class="mt-2">
      <a-input v-model="listItem.title" class="bg-config rounded-md py-1" auto-complete="off">
        <template #prepend>
          <span>{{ $t('list.editor.title') }}</span>
        </template>
      </a-input>
    </p>
    <p class="bg-config mt-2 flex justify-between rounded-md p-2 px-3 text-base">
      <span>{{ $t('list.editor.ddl') }}</span>
      <a-date-picker
        position="top"
        format="yyyy-MM-dd hh:mm"
        :show-time="true"
        show-confirm-btn
        @ok="setDDL"
      >
        <span class="inline-flex items-center text-red-400">
          {{
            listItem.endTime
              ? getDateLocaleString(listItem.endTime, $i18n.locale, true)
              : $t('list.editor.ddl.none')
          }}
        </span>
      </a-date-picker>
    </p>
    <p class="bg-config describution mt-2 flex-1 rounded-md px-3 pb-0 pt-2">
      <span>{{ $t('list.editor.description') }}</span>
      <a-textarea
        v-model="listItem.description"
        :placeholder="$t('list.editor.description.placeholder')"
        :auto-size="true"
        class="h-full"
      />
    </p>
    <p class="bg-config mt-2 rounded-md p-1 text-center opacity-80">
      <span>
        {{ $t(listItem.updatedAt ? 'list.editor.footer.update' : 'list.editor.footer.create') }}
        {{ getDateLocaleString(listItem.createdAt, $i18n.locale, true) }}
      </span>
    </p>
  </div>
</template>

<style scoped>
.editor::-webkit-scrollbar {
  width: 0;
}

.bg-config {
  @apply bg-light-500 dark:bg-gray-700;
}

:deep(.arco-input-prepend) {
  background-color: transparent;
}

:deep(.arco-input-wrapper) {
  background-color: transparent;
}

:deep(.arco-input-focus) {
  border-color: transparent;
}

:deep(.arco-textarea-focus) {
  border-color: transparent;
  background-color: transparent;
}

:deep(.arco-textarea-wrapper) {
  border-color: transparent;
  background-color: transparent;
}

:deep(.arco-textarea-wrapper textarea) {
  padding: 0;
}

:deep(.arco-textarea-wrapper:hover) {
  border-color: transparent;
}
</style>
